<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
			var weather ={
			    "HeWeather5":[
			        {
			            "basic": {
			                "city": "北京",
			                "cnty": "中国",
			                "id": "CN101010100",
			                "lat": "39.904000",
			                "lon": "116.391000",
			                "update": {
			                    "loc": "2017-03-23 16:02",
			                    "utc": "2017-03-23 08:02"
			                }
			            },
			            "daily_forecast": [
			                {
			                    "astro": {
			                        "mr": "03:07",
			                        "ms": "13:23",
			                        "sr": "06:13",
			                        "ss": "18:29"
			                    },
			                    "cond": {
			                        "code_d": "305",
			                        "code_n": "305",
			                        "txt_d": "小雨",
			                        "txt_n": "小雨"
			                    },
			                    "date": "2017-03-23",
			                    "hum": "58",
			                    "pcpn": "5.8",
			                    "pop": "100",
			                    "pres": "1024",
			                    "tmp": {
			                        "max": "10",
			                        "min": "2"
			                    },
			                    "uv": "2",
			                    "vis": "13",
			                    "wind": {
			                        "deg": "125",
			                        "dir": "东风",
			                        "sc": "微风",
			                        "spd": "3"
			                    }
			                },
			                {
			                    "astro": {
			                        "mr": "03:49",
			                        "ms": "14:22",
			                        "sr": "06:11",
			                        "ss": "18:30"
			                    },
			                    "cond": {
			                        "code_d": "305",
			                        "code_n": "104",
			                        "txt_d": "小雨",
			                        "txt_n": "阴"
			                    },
			                    "date": "2017-03-24",
			                    "hum": "68",
			                    "pcpn": "3.3",
			                    "pop": "100",
			                    "pres": "1022",
			                    "tmp": {
			                        "max": "7",
			                        "min": "0"
			                    },
			                    "uv": "2",
			                    "vis": "14",
			                    "wind": {
			                        "deg": "43",
			                        "dir": "南风",
			                        "sc": "微风",
			                        "spd": "3"
			                    }
			                },
			                {
			                    "astro": {
			                        "mr": "04:28",
			                        "ms": "15:25",
			                        "sr": "06:10",
			                        "ss": "18:31"
			                    },
			                    "cond": {
			                        "code_d": "101",
			                        "code_n": "100",
			                        "txt_d": "多云",
			                        "txt_n": "晴"
			                    },
			                    "date": "2017-03-25",
			                    "hum": "54",
			                    "pcpn": "0.0",
			                    "pop": "10",
			                    "pres": "1022",
			                    "tmp": {
			                        "max": "14",
			                        "min": "4"
			                    },
			                    "uv": "4",
			                    "vis": "18",
			                    "wind": {
			                        "deg": "246",
			                        "dir": "南风",
			                        "sc": "微风",
			                        "spd": "0"
			                    }
			                }
			            ],
			            "status": "ok"
			        }
			    ]
			}	
	</script>
	<style>
		.box{
			width: 600px;
			height: 400px;
			margin:auto;
			margin-top: 200px;
		}
		.title{
			text-align: center;
			font-size: 25px;
			font-weight: 600;
			margin-bottom: 30px;
		}
		#text{
			width:480px;
			height: 20px;
			padding: 6px;
			border:1px solid #1e91ff;
			float: left;
		}
		.btn{
			line-height: 32px;
			width: 80px;
			background-color: #1e91ff;
			border:1px solid #1e91ff;
			float: left;
			text-align: center;
			color:#fff;
			cursor: pointer;
		}
		#text1{
			color: #1e91ff;
			text-align: center;
			clear:left;
			line-height: 50px;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="title">小仙女天气预报</div>
		<input id="text" type="text" name="">
		<div class="btn" onclick="onClick()">确定</div>
		<div id="text1"></div>
	</div>
	<script type="text/javascript">
	function onClick(){
 		var text = document.getElementById("text").value;
        var text1 = document.getElementById("text1");
        if(text=="北京"){
		text1.innerText = "城市:"+weather.HeWeather5[0].basic.city+",天气:" + weather.HeWeather5[0].daily_forecast[0].cond.txt_d + ",日期：" + weather.HeWeather5[0].daily_forecast[0].date;
        }else{
        	text1.innerText = "";
        }	
	}
	</script>
</body>
</html>